<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />

        <!-- Base Css Files -->
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/jqueryui/ui-lightness/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/fontello/css/fontello.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/animate-css/animate.min.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/nifty-modal/css/component.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/magnific-popup/magnific-popup.css" rel="stylesheet" /> 
        <link href="__PUBLIC__/statics/coco-chat/assets/css/style.css" rel="stylesheet" type="text/css" />
        <link href="__PUBLIC__/statics/coco-chat/assets/css/style-responsive.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/pace/pace.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/jquery-notifyjs/styles/metro/notify-metro.css" rel="stylesheet" type="text/css" />
        
        <!-- Extra CSS Files -->
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/jquery-icheck/skins/all.css" rel="stylesheet" />
        
        <!-- Custom Css Files -->
        <link href="__ADMIN_CSS__/style.css"  rel="stylesheet" />
    </head>
    <body>
    <div>
        <div class="sub-header-title">
            <h2>商品分类列表</h2>
        </div>
        <div class="form-horizontal">
          <div class="form-group">
          <div class="col-sm-12">
                    <a class="btn btn-success pull-right" href="javascript:;"  id="add-cate">添加商品分类</a>
                </div>
          </div>
        </div>
    </div>
    
    <div class="widget">
        <div class="widget-content">
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                      <th>分类名称</th>
                      <th>状态</th>
                        <th>添加时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="module_list">
                  <volist name="list" id="vo">
                    <tr data-id="{$vo.id}" data-status="{$vo.status}" data-title="{$vo.title}">         
                            <td>{$vo.title}</td>
                            <td>
                              <if condition="$vo.status eq  1"><font class="green">开启</font><else /><font class="red">关闭</font></if>
                            </td>
                            <td>{$vo.add_time}</td>
                            <td>
                            <a class="edit-cate" href="javascript:;">修改</a> |
                                <a class="del-cate" href="javascript:;">删除</a> |
                                <a class="set-status" href="javascript:void(0);"><if condition="$vo.status eq  1">关闭<else />开启</if></a>
              </td>
                        </tr>
                  </volist>
              </tbody>
            </table>
            {$page}
        </div> 
    </div> 
    
    <script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery/jquery-1.11.1.min.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/bootstrap/js/bootstrap.min.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/jqueryui/jquery-ui-1.10.4.custom.min.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-ui-touch/jquery.ui.touch-punch.min.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-detectmobile/detect.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/fastclick/fastclick.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-slimscroll/jquery.slimscroll.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/nifty-modal/js/classie.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/nifty-modal/js/modalEffects.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-notifyjs/notify.min.js"></script>
    <script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-notifyjs/styles/metro/notify-metro-blue.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/pace/pace.min.js"></script>
  
  <!-- Extra Js Files -->
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-dragsort/jquery.dragsort-0.5.2.min.js"></script>

      <!-- Custom Js Files -->
    <script src="__ADMIN_JS__/common.js"></script>

    <script>
    //排序
    sort();

    //添加商品分类
    $('#add-cate').click(function(){
        window.parent.layer.open({
              type: 1, //page层
              title: '添加商品分类',
              area: ['450px', '200px'],
              btn: ['添加','取消'],
              content:'<div class="category-box">'
                        +'<div class="form-group">'
                            +'<label class="col-sm-3 control-label"><span class="red_star">*</span>名称：</label>'
                            +'<div class="col-sm-8">'
                            +'<input id="cate_title" class="form-control" />'
                            +'</div>'
                        +'</div>'
                        +'<div class="form-group">'
                          +'<label class="col-sm-3 control-label"></label>'
                          +'<div class="col-sm-8">'
                            +'<p class="help-block">必须在2~20个字符之间</p>'
                          +'</div>'
                      +'</div>'
                    +'</div>',
              yes: function(index,layero){
                var title = $.trim($(layero).find('#cate_title').val());
                if (!title) {
                  //弹出提示
              window.parent.layer.msg("名称不能为空");
                  return false;
                }
                if (title.length<2 || title.length>20) {
                  //弹出提示
              window.parent.layer.msg("名称必须在2~20个字符之间");
                  return false;
                }
                // 用ajax提交表单
                $.post("{:U('Mall/addCategory')}", 'title='+title, function(response) {
                  //弹出提示
              window.parent.layer.msg(response.message);
                  
                  //根据请求相应状态提示通知
                  if(response.status){
                    notify("success",response.message);
                    window.parent.layer.close(index);
                window.location.reload();
              }else{
                notify("error",response.message);
              }
                }, 'json');
            }
      }); 
    });
    
    //修改商品分类
    $('.edit-cate').click(function(){
      var id = $(this).parents('tr').data("id");
      var title = $(this).parents('tr').data("title");
          window.parent.layer.open({
              type: 1, //page层
              title: '修改商品分类',
              area: ['450px', '210px'],
              btn: ['保存','取消'],
          content:'<div class="category-box">'
                      +'<div class="form-group">'
                            +'<label class="col-sm-3 control-label"><span class="red_star">*</span>名称：</label>'
                          +'<div class="col-sm-8">'
                            +'<input id="cate_title" class="form-control" value="'+title+'"/>'
                            +'</div>'
                      +'</div>'
                      +'<div class="form-group">'
                          +'<label class="col-sm-3 control-label"></label>'
                          +'<div class="col-sm-8">'
                            +'<p class="help-block">必须在2~20个字符之间</p>'
                          +'</div>'
                      +'</div>'
                  +'</div>',
                     
              yes: function(index,layero){
                var title = $.trim($(layero).find('#cate_title').val());
                if (!title) {
                  //弹出提示
              window.parent.layer.msg("名称不能为空");
                  return false;
                }
                if (title.length<2 || title.length>20) {
                  //弹出提示
              window.parent.layer.msg("名称必须在2~20个字符之间");
                  return false;
                }
                var data = {
                    'id'  : id,
                        'title' : title
                      };
                    // 用ajax提交表单
                $.post("{:U('Mall/editCategory')}", data, function(response) {
                  //弹出提示
              window.parent.layer.msg(response.message);
                  
                  //根据请求相应状态提示通知
                  if(response.status){
                    notify("success",response.message);
                    window.parent.layer.close(index);
                window.location.reload();
              }else{
                notify("error",response.message);
              }
                }, 'json');
            }
          }); 
      });
      
    //删除商品分类
    $('.del-cate').click(function(){
      var id = $(this).parents('tr').data("id");
      window.parent.layer.confirm('确定删除该分类吗？', {
          btn: ['确认','取消'] //按钮
          },function(index){
              // 用ajax提交表单
              $.post("{:U('Mall/deleteCategory')}", 'id='+id, function(response) {
                //弹出提示
            window.parent.layer.msg(response.message);
                
                //根据请求相应状态提示通知
                if(response.status){
                  notify("success",response.message);
                  window.location.reload();
            }else{
              notify("error",response.message);
            }
                //关闭确认对话框
                window.parent.layer.close(index);
              }, 'json');
          }); 
      });
    
    // 设置商品分类状态
      $('.set-status').click(function(event) {
        var id = $(this).parents('tr').data("id");
        var status = $(this).parents('tr').data("status");
        var operation = "开启";
        if (status==1) {
          operation = "关闭";
        }
        
        window.parent.layer.confirm('确认要'+ operation +'该商品分类吗', {
          btn: ['确认','取消'], //按钮
      }, function(index){
        //ajax保存状态
        var data = {
            'id'    : id,
            'status'  : status ? 0 : 1
        };
        // 用ajax提交表单
            $.post("{:U('Mall/setCategoryStatus')}", data, function(response) {
          //弹出提示
          window.parent.layer.msg(response.message);
              
              //根据请求相应状态提示通知
              if(response.status){
            notify("success",response.message);
            window.location.reload();
          }else{
            notify("error",response.message);
          }
            }, 'json');
        
        //关闭确认对话框
            window.parent.layer.close(index);
      });
      });
    
      //排序
    function sort(){
      var list = $("#module_list");
      var ids  = new Array();
      if(list.find("tr").length==1){
        return false;
      }
            list.dragsort({
                dragSelector : "tr",  //可以不用设置，他会根据$("#tableid")的类型来决定是tr还是li
                dragEnd : function(){
                  list.find("tr").each(function(index){
            var id = $(this).data("id");
            ids.push(id);
          })
          var data = {'ids':ids};
                  
                  // 用ajax提交表单
              $.post("{:U('Mall/sort')}", data, function(response) {
            //弹出提示
            window.parent.layer.msg(response.message);
                
                //根据请求相应状态提示通知
                if(response.status){
              notify("success",response.message);
              window.location.reload();
            }else{
              notify("error",response.message);
            }
              }, 'json');
                },
                scrollSpeed:5,  //默认为5，数值越大拖动的速度越快，为0则拖动时页面不会滚动
            });
    }
    </script>
    </body>
</html>